<template>
  <el-dialog
    title="添加群成员"
    :visible.sync="visible"
    :close-on-click-modal="false"
    top="8vh"
  >
    <this-search ref="search" @on-search="fetch(1)" />

    <el-table :data="rows" class="mb-12" ref="table" :loading="loading">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column prop="displayName" label="昵称"> </el-table-column>
      <el-table-column label="成员类型">
        <template slot-scope="{ row }">{{
          row.userType === 2 ? "群主" : row.userType === 1 ? "管理员" : "成员"
        }}</template>
      </el-table-column>
      <el-table-column prop="uid" label="用户ID"> </el-table-column>
      <el-table-column prop="portrait" label="头像">
        <template slot-scope="{ row }">
          <img :src="row.portrait" class="w-8 h-8 rounded-full" />
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template slot-scope="{ row }">
          {{ row.gender === 2 ? "女" : row.gender === "1" ? "男" : "未知" }}
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="{ row }">
          {{ row.createTime | time2str }}
        </template>
      </el-table-column>
    </el-table>
    <the-page ref="page" @change="fetch" key="member_page" />

    <span slot="footer" class="">
      <el-button type="primary" size="small" @click="onAdd">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import thisSearch from "./search.vue";
import thePage from "@/components/page.vue";

export default {
  components: { thisSearch, thePage },

  data() {
    return {
      visible: false,
      row: null,
      loading: false,
      rows: [],
    };
  },
  methods: {
    open(row) {
      this.row = row;
      this.visible = true;
      this.$nextTick(() => {
        this.fetch(1);
      });
    },
    fetch(page) {
      this.$refs.search.groupId = this.row.gid;
      let params = this.$refs.search.conditions;

      this.$refs.page.num = page;
      params.pageNo = this.$refs.page.num;
      // params.size = this.page.size;
      this.loading = true;
      this.axios.post("user/list", params).then((res) => {
        const { items, totalCount } = res.data;
        this.rows = items;
        this.$refs.page.total = totalCount;
        // this.sum = sum;

        this.loading = false;
      });
    },
    onAdd() {
      const userIds = this.$refs.table.selection.map((item) => item.uid);

      this.axios
        .post(`/group/addUser`, {
          targetId: this.row.gid,
          userIds,
        })
        .then((res) => {
          if (res.retCode != 0) {
            return this.$message.error(res.retMsg);
          }
          this.fetch(1);
          this.$message.success("操作成功!");
        });
    },
  },
};
</script>